<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Payment</title>
    <link rel="stylesheet" href="styles/payment-form.css">
</head>

<body>
    <form>
        <h1>Payment form</h1>
        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
        <section>
            <h2>Contact information</h2>
            <fieldset>
                <legend>Title</legend>
                <ul>
                    <li>
                        <label for="title_1">
                            <input type="radio" id="title_1" name="title" value="M.">
                            Mister
                        </label>
                        <!-- <input type="radio" id="title_1" name="title" value="M."> -->
                    </li>
                    <li>
                        <label for="title_2">
                            <input type="radio" id="title_2" name="title" value="Ms.">
                            Miss
                        </label>
                    </li>
                </ul>
            </fieldset>
            <p>
                <label for="name">
                    <span>Name: </span>
                    <strong><abbr title="required">*</abbr></strong>
                </label>
                <input type="text" id="name" name="username" placeholder="输入name">
            </p>
            <p>
                <label for="mail">
                    <span>E-mail: </span>
                    <strong><abbr title="required">*</abbr></strong>
                </label>
                <input type="email" id="mail" name="usermail">
            </p>
            <p>
                <label for="pwd">
                    <span>Password: </span>
                    <strong><abbr title="required">*</abbr></strong>
                </label>
                <input type="password" id="pwd" name="password">
            </p>
        </section>
        <section>
            <h2>Payment information</h2>
            <p>
                <label for="card">
                    <span>Card type:</span>
                </label>
                <select id="card" name="usercard">
                    <option value="visa">Visa</option>
                    <option value="mc">Mastercard</option>
                    <option value="amex">American Express</option>
                </select>
            </p>
            <p>
                <label for="number">
                    <span>Card number:</span>
                    <strong><abbr title="required">*</abbr></strong>
                </label>
                <input type="number" id="number" name="cardnumber">
            </p>
            <p>
                <label for="date">
                    <span>Expiration date:</span>
                    <strong><abbr title="required">*</abbr></strong>
                    <em>formatted as mm/yy</em>
                </label>
                <input type="date" id="date" name="expiration">
            </p>
        </section>
    </form>
</body>

</html>